<template>
    <div class="goods-relevant">
        <div class="header">
            <i class="icon" />
            <span class="title">同类商品推荐</span>
        </div>
        <!-- 此处使用改造后的xtx-carousel.vue -->
        <XtxCarousel :sliders="list" />
    </div>
</template>

<script>
export default {
    // 同类推荐，猜你喜欢
    name: 'GoodsRelevant'
}
</script>

<script setup>
import { findRelGoods } from '@/apis/goods'
import { ref, watch } from 'vue'

const props = defineProps({
    goodsId: {
        type: String,
        default: ''
    }
})

const list = ref([])

watch(() => props.goodsId, () => {
    findRelGoods(props.goodsId).then(({ result }) => {
        for (let i = 0; i < 4; i++) {
            let temp = result.slice(i * 4, i * 4 + 4)
            list.value.push(temp)
        }
    }).catch(err => {
        console.log(err);
    })
}, { immediate: true })

</script>

<style scoped lang='less'>
:deep(.xtx-carousel) {
    height: 380px;

    .carousel {
        &-indicator {
            bottom: 30px;

            span {
                &.active {
                    background: @xtxColor;
                }
            }
        }

        &-btn {
            top: 110px;
            opacity: 1;
            background: rgba(0, 0, 0, 0);
            color: #ddd;

            i {
                font-size: 30px;
            }
        }
    }
}

.goods-relevant {
    background: #fff;
    min-height: 460px;
    margin-top: 20px;

    .header {
        height: 80px;
        line-height: 80px;
        padding: 0 20px;

        .title {
            font-size: 20px;
            padding-left: 10px;
        }

        .icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            border-top: 4px solid @xtxColor;
            border-right: 4px solid @xtxColor;
            box-sizing: border-box;
            position: relative;
            transform: rotate(45deg);

            &::before {
                content: "";
                width: 10px;
                height: 10px;
                position: absolute;
                left: 0;
                top: 2px;
                background: lighten(@xtxColor, 40%);
            }
        }
    }
}
</style>